<template>
  <div class="login-container">

    <!-- 打印区域 -->
    <div style="
        width: 240px;
        padding: 2px;
        margin: 2px;" id="QR-code">
        <!-- border: 1px solid #000; -->
      <div v-for="i in 3" :key="i"  style="
        display: flex;
        padding: 5px 10px;
        width: 235px;
        height: 100px;
        align-items: center;
        " 
        :style="{
          marginTop:i!= 1?'20px':'0px',
          paddingTop:i!= 1?'15px':'5px'
        }"
      class="QR-code" >
        
        <vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90"  text="芯烨打印机" :size="80" :margin="0" :logoMargin="3"></vue-qr>
        <div style="    
          margin-left: 10px;
          font-size: 12px;">
          <div>设备名称：</div>
          <div style="    
          margin-bottom: 14px;">芯烨打印机</div>
          <div>设备型号：</div>
          <div>XP_TT426B</div>
        </div>
      </div>
    </div>
    <div class="btn-content">
      <a class="btn btn-outline" v-on:click="printQrcode1('QR-code')">
        <i class="icon iconfont">&#xe6f3;</i>
        打印
      </a>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: 'Login',
  components: {
    VueQr
  },
  data() {
    return {
    }
  },
  watch: {
  },
  created(){
 
    
  },
  mounted(){
   
  },
  methods: {
    printQrcode1(id_str) {
      var el = document.getElementById(id_str);//id-str 打印区域的id
      var iframe = document.createElement('IFRAME');
      var doc = null;
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      // 引入打印的专有CSS样式，www.111Cn.net根据实际修改
      // doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
      doc.write('<div>' + el.innerHTML + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf("MSIE") > 0)
      {
          document.body.removeChild(iframe);
      }
    }
  }
}
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
#anycanvas{
  width: 1100px;
  height: 400px;
  border: solid 1px #000;
}

.QR-code{
  
  >div{

  }
}
</style>
